.chart2 {
    display: flex;
    width: 55%;
    .chart2_1 {
        position: relative;
        border: 1px solid #e6eaef;
        border-radius: 4px;
        width: 40%;
        margin-left: 2%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        .legendBox {
            padding: 0 0 20px 32px;
            & > p {
                display: inline-block;
                align-items: center;
                justify-content: space-around;
                margin-bottom: 0.25rem;
                font-size: 14px;
                .name {
                    display: inline-block;
                }
                .score {
                    width: 2rem;
                }
                &:nth-child(2n) {
                    padding-left: 5px;
                }
            }
        }
        .title {
            position: absolute;
            padding: 16px;
            width: 100%;
        }
    }
    .chart2_2 {
        margin-left: 2%;
        width: 56%;
        border: 1px solid #e6eaef;
        border-radius: 4px;
        padding: 16px;
        display: flex;
        flex-flow: column;
        .title2_2 {
            display: flex;
            justify-content: space-between;
        }
        .li2_2 {
            margin-top: 8px;
            position: relative;
            .li2_2_1 {
                display: flex;
                justify-content: space-between;
                span:nth-child(1) {
                    width: 60%;
                    cursor: pointer;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-left: 1rem;
                }
            }
            .li2_2_2 {
                flex: 1;
                cursor: pointer;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .li2_2_3 {
                width: 100%;
                height: 4px;
                .li_sp1 {
                    width: 100%;
                    background: #e9eff5;
                    height: 4px;
                    display: inline-block;
                    position: absolute;
                    border-radius: 4px;
                }
                .li_sp2 {
                    position: absolute;
                    background: #0b6fd6;
                    height: 4px;
                    border-radius: 4px;
                }
            }
        }
    }
}
.legendC {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5%;
}
.charp {
    width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.df {
  display: flex;
}
